<template>
	<base-popup :modelValue="modelValue" @close="onClose" :title="$t('bankCardAdd.cardNumber')">
		<div class="usdt-address-add">
			<div class="py-[15px] px-[25px]">
				<wallet-select-bank
					:placeholder="$t('wallet.bankSelect')"
					class="!h-[60px] mb-5 border-b-[2px] border-bg-3"
					:options="list"
					:ableDeleted="false"
					modifyClass="!pr-0 !border-t-0  !border-l-0  !border-r-0 rounded-none !border-b-[2px]"
					v-model:modelValue="bankValue" />
				<base-input
					type="code"
					v-model="cardNumber"
					:label="$t('bankCardAdd.cardNumber')"
					clearable>
					<template #suffix v-if="!cardNumber">
						<base-paste @paste="onPaste" />
					</template>
				</base-input>

				<template v-if="!isShowMobile">
					<base-input
						v-model="code"
						type="code"
						:maxlength="6"
						:error="codeError"
						:label="$t('binding.mobileCodePH')"
						clearable>
						<template #right>
							<base-code
								:type="AccountType.mobile"
								:codeType="CodeType.addWallet"
								:disabled="!isMobileValue"
								:nameData="mobile" />
						</template>

						<template #error>
							<div class="error-tip">
								<!--							<base-field-error :isIcon="0" :text="codeError" v-if="codeError"></base-field-error>-->
							</div>
						</template>
					</base-input>
					<p class="error-tip__text">
						{{
							t('usdtAddressAdd.contact', {
								contact: fmtMobile(mobile)
							})
						}}
					</p>
				</template>
				<template v-else>
					<base-input
						v-model="code"
						type="code"
						:maxlength="6"
						:error="codeError"
						:label="$t('binding.emailCodePH')"
						clearable>
						<template #suffix>
							<base-code
								:type="AccountType.email"
								:codeType="CodeType.addWallet"
								:disabled="!isEmailValue"
								:nameData="email" />
						</template>

						<template #error>
							<div class="error-tip">
								<!--							<base-field-error :isIcon="0" :text="codeError" v-if="codeError"></base-field-error>-->
							</div>
						</template>
					</base-input>
					<p class="error-tip__text">
						{{ t('usdtAddressAdd.contact', { contact: fmtEmail(email) }) }}
					</p>
				</template>
				<!--				.text-btn { display: block; height: 20px; font-size: 14px; color: var(&#45;&#45;color-primary);-->
				<!--				line-height: 20px; margin-top: 16px; }-->
				<button
					class="cursor-pointer block h-[20px] text-primary mt-4 bg-transparent"
					v-if="isShowSwitch"
					@click="handleToggleValida">
					{{ !isShowMobile ? $t('usdtAddressAdd.switchEmail') : $t('usdtAddressAdd.switchMobile') }}
				</button>

				<base-button
					type="primary"
					block
					round
					:disabled="submitDisabled"
					:loading="loading"
					@click="onSubmit"
					style="margin-top: 27px">
					{{ $t('usdtAddressAdd.submit') }}
				</base-button>
			</div>
		</div>
	</base-popup>

	<!--	<wallet-select-->
	<!--		:title="$t('wallet.bankSelect') + '123'"-->
	<!--		v-model="bankSelectShow"-->
	<!--		:wallet-list="list"-->
	<!--		@select="handleSelect"-->
	<!--		tag="id"-->
	<!--		:selected-code="cardBank?.id" />-->
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { addCard } from '@/api/wallet'
import { fmtEmail, fmtMobile, isCode, isEmail, isMobile, showError, showSuccess, t } from '@/utils'
import { AccountType, CodeType } from '@/enums'
import { BANK_USDT_MAX_LIMIT } from '@/constants'
import { useProfileStore, useWalletStore } from '@/store'
import { BaseInput, BasePaste, BaseCode, BaseButton, BasePopup } from '@/components/base'
import WalletSelectBank from '@/views/wallet/components/wallet-select-bank.vue'

const profileStore = useProfileStore()
const walletStore = useWalletStore()
const mobile = computed(() => profileStore.userInfo?.mobile || '')
const email = computed(() => profileStore.userInfo?.email || '')
const isShowMobile = ref(!!email.value)
const isShowSwitch = computed(() => mobile.value && email.value)
const modelValue = computed(() => walletStore.showWalletBankCardSelectPopup)

function handleToggleValida() {
	code.value = ''
	isShowMobile.value = !isShowMobile.value
}

const code = ref('')
const codeError = computed(() => (code.value && !isCode(code.value) ? t('error.code') : ''))
const bankValue: any = ref('')

const realName = computed(() => profileStore.userInfo?.realName || '')
const list: any = computed({
	get: () => {
		return walletStore.bankList.map((item: any) => ({
			id: item.id,
			text: item.name,
			img: item.icon,
			type: 'server'
		}))
	},
	set: (newValue) => (list.value = newValue)
})

const cardBank: any = ref(walletStore.bankList[0])

watch(
	list,
	(newValue) => {
		cardBank.value = newValue[0]
	},
	{ immediate: true }
)

const cardNumber = ref('')
watch(cardNumber, (nv) => {
	if (nv.length > BANK_USDT_MAX_LIMIT) {
		cardNumber.value = nv.slice(0, BANK_USDT_MAX_LIMIT)
	}
})
const isEmailValue = computed(
	() => isEmail(email.value) && cardBank.value?.name && cardNumber.value
)
const isMobileValue = computed(
	() => isMobile(mobile.value) && cardBank.value?.name && cardNumber.value
)
// const cardNumberError = ref('')
const submitDisabled = computed(
	() =>
		!bankValue.value ||
		// !cardBank.value ||
		!cardNumber.value ||
		!code.value ||
		!!codeError.value
	// (!isEmailValue.value && !isMobileValue.value)
)

const loading = ref(false)

const onPaste = (text: string) => (cardNumber.value = text.replace(/\D/g, ''))

const onSubmit = async () => {
	try {
		loading.value = true
		const params = {
			cardHolder: realName.value,
			cardNumber: cardNumber.value,
			bankId: bankValue.value || cardBank.value?.id,
			code: code.value,
			type: !isShowMobile.value ? 2 : 1
		}
		await addCard(params)
		await walletStore.getAllCards()
		loading.value = false
		showSuccess(t('tip.saveSuccess'))
		// router.back()
		onClose()
		reset()
	} catch (error: any) {
		loading.value = false
		showError(error)
	}
}

onMounted(async () => {
	if (!list.value.length) {
		await walletStore.getBanks()
	}
})

const onClose = () => {
	walletStore.setWalletBankCardSelectPopupShow(false)
}
const reset = () => {
	// cardBank.value.name = ''
	bankValue.value = ''
	cardNumber.value = ''
	code.value = ''
}
</script>

<style lang="scss" scoped>
.usdt-address-add {
	.error-tip {
		display: flex;
		align-items: center;
	}
}

.error-tip__text {
	height: 14px;
	font-size: 12px;

	color: var(--color-text-2);
	line-height: 14px;
}
</style>
